import React from "react";
import {
  Image,
  Input,
  InputGroup,
  Button,
  FormControl,
  InputLeftAddon,
  FormErrorMessage,
  Box,
  Text,
  useToast,
} from "@chakra-ui/core";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
import axios from "axios";
import icon_user from "../assets/icon_user.png";
import icon_password from "../assets/icon_password.png";
import icon_phone from "../assets/icon_phone.png";

function SignUp() {
  const initialValues = { username: "", email: "", password: "" };
  const toast = useToast();
  const handleSubmit = (user, actions) => {
    console.log(user);
    axios({
      method: "POST",
      url: "/api/users",
      data: {
        user,
      },
    })
      .then((res) => {
        if (res.data.user) {
          toast({
            description: "注册成功",
            status: "success",
            duration: 3000,
            position: "top",
          });
        }
        actions.setSubmitting(false)
      })
      .catch((err) => {
        toast({
          description: "注册失败",
          status: "error",
          duration: 3000,
          position: "top",
        });
        actions.setSubmitting(false)
      });
  };
  const schema = Yup.object({
    username: Yup.string()
      .max(15, "用户名的长度不能大于15")
      .required("请输入用户名"),
    email: Yup.string().required("请输入邮箱"),
    password: Yup.string().min(8, "密码的长度不能小于8位").required("请输入密码"),
  });
  // isInvalid={form.errors.email && form.touched.email}
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validationSchema={schema}
    >
      {(props) => (
        <Form>
          <Field name="username">
            {({ field, form }) => (
              <FormControl
                isInvalid={form.errors.username && form.touched.username}
              >
                <InputGroup bgColor="#f7f7f7">
                  <InputLeftAddon
                    position="absolute"
                    top="1px"
                    left="1px"
                    p="5px 10px"
                    border="none"
                    bgColor="transparent"
                    children={<Image src={icon_user} w="18px" h="25px" />}
                  />
                  <Input
                    {...field}
                    placeholder="请输入用户名"
                    bgColor="#f7f7f7"
                    border="1px solid #c8c8c8"
                    outline="none"
                    paddingLeft="40px"
                    _focus={{ border: "1px solid #c8c8c8" }}
                  />
                </InputGroup>
                <FormErrorMessage>{form.errors.username}</FormErrorMessage>
              </FormControl>
            )}
          </Field>
          <Field name="email">
            {({ field, form }) => (
              <FormControl
                isInvalid={form.errors.email && form.touched.email}
                marginTop="15px"
              >
                <InputGroup bgColor="#f7f7f7">
                  <InputLeftAddon
                    position="absolute"
                    top="1px"
                    left="1px"
                    p="5px 10px"
                    border="none"
                    bgColor="transparent"
                    children={<Image src={icon_phone} w="18px" h="25px" />}
                  />
                  <Input
                    {...field}
                    type="email"
                    placeholder="请输入邮箱"
                    bgColor="#f7f7f7"
                    border="1px solid #c8c8c8"
                    outline="none"
                    paddingLeft="40px"
                    _focus={{ border: "1px solid #c8c8c8" }}
                  />
                </InputGroup>
                <FormErrorMessage>{form.errors.email}</FormErrorMessage>
              </FormControl>
            )}
          </Field>
          <Field name="password">
            {({ field, form }) => (
              <FormControl
                isInvalid={form.errors.password && form.touched.password}
                marginTop="15px"
              >
                <InputGroup bgColor="#f7f7f7">
                  <InputLeftAddon
                    position="absolute"
                    top="1px"
                    left="1px"
                    p="5px 10px"
                    border="none"
                    bgColor="transparent"
                    children={<Image src={icon_password} w="18px" h="25px" />}
                  />
                  <Input
                    {...field}
                    type="password"
                    placeholder="请输入密码"
                    bgColor="#f7f7f7"
                    border="1px solid #c8c8c8"
                    outline="none"
                    paddingLeft="40px"
                    _focus={{ border: "1px solid #c8c8c8" }}
                  />
                </InputGroup>
                <FormErrorMessage>{form.errors.password}</FormErrorMessage>
              </FormControl>
            )}
          </Field>
          <Button
            type="submit"
            isLoading={props.isSubmitting}
            marginTop="25px"
            w="100%"
            h="43px"
            outline="none"
            border="none"
            fontSize="18px"
            color="#ffffff"
            bgColor="#3194d0"
            borderRadius="50px"
            _hover={{ backgroundColor: "#187cb7" }}
          >
            注册
          </Button>
          <Box
            marginTop="15px"
            fontSize="12px"
            color="#969696"
            textAlign="center"
          >
            点击 “注册” 即表示您同意并愿意遵守简书
            <br />
            <Text fontSize="12px" color="#3194d0" as="span">
              用户协议
            </Text>
            和
            <Text fontSize="12px" color="#3194d0" as="span">
              隐私政策
            </Text>
          </Box>
        </Form>
      )}
    </Formik>
  );
}

export default SignUp;
